﻿<!--
THIS CODE AND INFORMATION IS PROVIDED "AS IS" WITHOUT WARRANTY OF
ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING BUT NOT LIMITED TO
THE IMPLIED WARRANTIES OF MERCHANTABILITY AND/OR FITNESS FOR A
PARTICULAR PURPOSE.

Copyright (c) Microsoft Corporation. All rights reserved
-->

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link rel="stylesheet" href="/css/scenario2.css" />
    <script src="/js/scenario2.js"></script>
</head>
<body>
    <div data-win-control="SdkSample.ScenarioInput">
        <p>Use the imaging APIs (Windows.Graphics.Imaging) to read and edit bitmap properties and apply transformations such as scale, crop and rotate.</p>
        <button id="buttonOpen">Open</button>
        <button id="buttonRotateLeft">Rotate left</button>
        <button id="buttonRotateRight">Rotate right</button>
        <button id="buttonSave">Save</button>
        <button id="buttonSaveAs">Save as</button>
        <button id="buttonClose">Close</button>
    </div>
    <div data-win-control="SdkSample.ScenarioOutput">
        <div class="centeredImageFrame">
            <div class="centeredImageFrameCell">
                <img class="imageHolder withText inCenteredFrame" id="outputImage" alt="image holder" src="" />
            </div>
        </div>
        <table>
            <tr>
                <td><input id="propertiesScaleFactorEdit" type="range" max="100" min="10" step="5" /></td>
            </tr>
            <tr>
                <td><p>Scale:</p></td>
                <td><p id="propertiesScaleFactor"></p></td>
            </tr>
            <tr>
                <td><p>Scaled width:</p></td>
                <td><p id="propertiesWidth"></p></td>
            </tr>
            <tr>
                <td><p>Scaled height:</p></td>
                <td><p id="propertiesHeight"></p></td>
            </tr>
            <tr>
                <td><p>User rotation:</p></td>
                <td><p id="propertiesUserRotation"></p></td>
            </tr>
            <tr>
                <td><p>EXIF orientation:</p></td>
                <td><p id="propertiesExifOrientation"></p></td>
            </tr>
        </table>
    </div>
</body>
</html>
